<template>
  <div id="app">
     <el-table
      :data="filterData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
    layout="prev, pager, next,sizes"
    :total="tableData.length"
     :page-sizes="[5,10, 20]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
  </el-pagination>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
  },

  computed: {
    filterData: function(){
    // pageSize 为5条
    // pageNum 为 页数 1页

    /* 
    第一页 pageNum 1 pageSize 5 => 0  5
        第二页 pageNum 2 pageSize 5 => 5  10
        .....
        第n页 pageNum n pageSize 5 => (pageNum-1)*5 pageNum*5
     */
    
    let filterData = this.tableData.slice(
      (this.pageNum -1) * this.pageSize,
      this.pageNum * this.pageSize
    );
  return filterData;
    }
  },

  data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎3',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          pageSize: 10,
          pageNum:1,
        }
      },

      methods: {
        handleSizeChange: function(pageSize){
           console.log(pageSize);
           this.pageSize = pageSize;
        },
        handleCurrentChange: function(pageNum){
          console.log("当前页面:", pageNum);
          this.pageNum = pageNum
        }
      }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
